<template>
    <!-- 文件预览对话框 -->
    <el-dialog v-model="visible" :title="`预览 - ${currentPreviewFile?.name || ''}`" width="80%" top="5vh"
        :destroy-on-close="true" @close="handleClose">
        <div class="preview-container">
            <!-- 图片预览 -->
            <div v-if="previewType === 'image'" class="image-preview">
                <img v-if="currentPreviewFile?.previewUrl" :src="currentPreviewFile.previewUrl"
                    :alt="currentPreviewFile.name" class="preview-image" @error="handleImageError" />
                <div v-else class="preview-placeholder">
                    <i class="iconfont icon-image" style="font-size: 64px; color: #ccc;"></i>
                    <p>图片加载中...</p>
                </div>
            </div>

            <!-- 文本文件预览 -->
            <div v-else-if="previewType === 'text'" class="text-preview">
                <div v-if="isLoadingText" class="preview-placeholder">
                    <i class="iconfont icon-file-text" style="font-size: 64px; color: #ccc;"></i>
                    <p>正在加载文本内容...</p>
                </div>
                <div v-else-if="textContent" class="text-content">
                    <div class="text-header">
                        <i class="iconfont icon-file-text" style="font-size: 24px; color: #409EFF;"></i>
                        <span class="text-title">{{ currentPreviewFile?.name }}</span>
                    </div>
                    <div class="text-body">
                        <pre class="text-content-pre">{{ textContent }}</pre>
                    </div>
                </div>
                <div v-else class="preview-placeholder">
                    <i class="iconfont icon-file-text" style="font-size: 64px; color: #ccc;"></i>
                    <p>文本文件预览</p>
                    <p class="preview-tip">无法加载文本内容，请下载后查看</p>
                </div>
            </div>

            <!-- 视频文件预览 -->
            <div v-else-if="previewType === 'video'" class="video-preview">
                <video v-if="currentPreviewFile?.previewUrl" :src="currentPreviewFile.previewUrl" controls
                    class="preview-video" @error="handleVideoError" @loadstart="handleMediaLoadStart"
                    @canplay="handleMediaCanPlay" preload="metadata">
                    您的浏览器不支持视频播放。
                </video>
                <div v-else class="preview-placeholder">
                    <i class="iconfont icon-video" style="font-size: 64px; color: #ccc;"></i>
                    <p>视频文件预览</p>
                    <p class="preview-tip">正在加载视频...</p>
                </div>
            </div>

            <!-- 音频文件预览 -->
            <div v-else-if="previewType === 'audio'" class="audio-preview">
                <div v-if="currentPreviewFile?.previewUrl" class="audio-player-container">
                    <div class="audio-info">
                        <i class="iconfont icon-music" style="font-size: 48px; color: #409EFF;"></i>
                        <div class="audio-title">{{ currentPreviewFile.name }}</div>
                    </div>
                    <audio :src="currentPreviewFile.previewUrl" controls class="preview-audio" @error="handleAudioError"
                        @loadstart="handleMediaLoadStart" @canplay="handleMediaCanPlay" preload="metadata">
                        您的浏览器不支持音频播放。
                    </audio>
                </div>
                <div v-else class="preview-placeholder">
                    <i class="iconfont icon-music" style="font-size: 64px; color: #ccc;"></i>
                    <p>音频文件预览</p>
                    <p class="preview-tip">正在加载音频...</p>
                </div>
            </div>

            <!-- PDF文件预览 -->
            <div v-else-if="previewType === 'pdf'" class="pdf-preview">
                <iframe v-if="currentPreviewFile?.previewUrl" :src="currentPreviewFile.previewUrl" class="preview-pdf"
                    @error="handlePdfError">
                </iframe>
                <div v-else class="preview-placeholder">
                    <i class="iconfont icon-file" style="font-size: 64px; color: #ccc;"></i>
                    <p>PDF文件预览</p>
                    <p class="preview-tip">正在加载PDF...</p>
                </div>
            </div>

            <!-- Excel文件预览 -->
            <div v-else-if="previewType === 'excel'" class="excel-preview">
                <div class="office-preview-placeholder">
                    <i class="iconfont icon-file" style="font-size: 64px; color: #409EFF;"></i>
                    <h3>Excel 文件预览</h3>
                    <p class="office-tip">当前浏览器不支持直接预览 Excel 文件</p>
                    <p class="office-suggestion">请下载文件后使用 Microsoft Excel 或兼容软件打开</p>
                    <div class="file-details">
                        <div class="detail-item">
                            <span class="label">文件名：</span>
                            <span class="value">{{ currentPreviewFile?.name }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">文件大小：</span>
                            <span class="value">{{ formatFileSize(currentPreviewFile?.size) }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">修改时间：</span>
                            <span class="value">{{ formatDateTime(currentPreviewFile?.lastUpdateTime) }}</span>
                        </div>
                    </div>
                    <el-button type="primary" @click="handleDownload" class="download-btn">
                        <i class="iconfont icon-download"></i>
                        立即下载
                    </el-button>
                </div>
            </div>

            <!-- Word文件预览 -->
            <div v-else-if="previewType === 'word'" class="word-preview">
                <div class="office-preview-placeholder">
                    <i class="iconfont icon-file" style="font-size: 64px; color: #409EFF;"></i>
                    <h3>Word 文件预览</h3>
                    <p class="office-tip">当前浏览器不支持直接预览 Word 文件</p>
                    <p class="office-suggestion">请下载文件后使用 Microsoft Word 或兼容软件打开</p>
                    <div class="file-details">
                        <div class="detail-item">
                            <span class="label">文件名：</span>
                            <span class="value">{{ currentPreviewFile?.name }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">文件大小：</span>
                            <span class="value">{{ formatFileSize(currentPreviewFile?.size) }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">修改时间：</span>
                            <span class="value">{{ formatDateTime(currentPreviewFile?.lastUpdateTime) }}</span>
                        </div>
                    </div>
                    <el-button type="primary" @click="handleDownload" class="download-btn">
                        <i class="iconfont icon-download"></i>
                        立即下载
                    </el-button>
                </div>
            </div>

            <!-- PowerPoint文件预览 -->
            <div v-else-if="previewType === 'powerpoint'" class="powerpoint-preview">
                <div class="office-preview-placeholder">
                    <i class="iconfont icon-file" style="font-size: 64px; color: #409EFF;"></i>
                    <h3>PowerPoint 文件预览</h3>
                    <p class="office-tip">当前浏览器不支持直接预览 PowerPoint 文件</p>
                    <p class="office-suggestion">请下载文件后使用 Microsoft PowerPoint 或兼容软件打开</p>
                    <div class="file-details">
                        <div class="detail-item">
                            <span class="label">文件名：</span>
                            <span class="value">{{ currentPreviewFile?.name }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">文件大小：</span>
                            <span class="value">{{ formatFileSize(currentPreviewFile?.size) }}</span>
                        </div>
                        <div class="detail-item">
                            <span class="label">修改时间：</span>
                            <span class="value">{{ formatDateTime(currentPreviewFile?.lastUpdateTime) }}</span>
                        </div>
                    </div>
                    <el-button type="primary" @click="handleDownload" class="download-btn">
                        <i class="iconfont icon-download"></i>
                        立即下载
                    </el-button>
                </div>
            </div>

            <!-- 其他文件类型 -->
            <div v-else class="other-preview">
                <div class="preview-placeholder">
                    <i class="iconfont icon-file" style="font-size: 64px; color: #ccc;"></i>
                    <p>不支持预览的文件类型</p>
                    <p class="preview-tip">请下载文件后查看</p>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="preview-footer">
                <div class="file-info">
                    <span class="info-item">文件名：{{ currentPreviewFile?.name }}</span>
                    <span class="info-item">大小：{{ formatFileSize(currentPreviewFile?.size) }}</span>
                    <span class="info-item">修改时间：{{ formatDateTime(currentPreviewFile?.lastUpdateTime) }}</span>
                </div>
                <div class="action-buttons">
                    <el-button @click="handleClose">关闭</el-button>
                    <el-button type="primary" @click="handleDownload">
                        <i class="iconfont icon-download"></i>
                        下载
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onUnmounted } from 'vue';
import { getPreviewUrl, previewFile } from '@/api/preview.js';
import { ElMessage } from 'element-plus';

// Props
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    file: {
        type: Object,
        default: null
    }
});

// Emits
const emit = defineEmits(['update:visible', 'download']);

// 响应式数据
const currentPreviewFile = ref(null);
const previewType = ref('');
const textContent = ref('');
const isLoadingText = ref(false);

// 资源管理
const createdUrls = ref(new Set()); // 追踪创建的URL对象
const mediaElements = ref(new Map()); // 追踪媒体元素

// 计算属性
const visible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
});

// 监听文件变化和对话框显示状态
watch(() => props.file, async (newFile) => {
    if (newFile && props.visible) {
        await initPreview(newFile);
    }
}, { immediate: true });

// 监听对话框显示状态变化，确保每次打开都重新初始化
watch(() => props.visible, async (isVisible) => {
    if (isVisible && props.file) {
        await initPreview(props.file);
    }
});

// 初始化预览
const initPreview = async (file) => {
    // 先清理之前的资源
    cleanupResources();

    const { categoryId, name, id } = file;

    // 创建预览URL（不使用时间戳参数）
    const previewUrl = getPreviewUrl(id);

    currentPreviewFile.value = { ...file, previewUrl };

    // 根据文件类型设置预览类型
    if (categoryId === 3) {
        previewType.value = 'image';
    } else if (isPdfFile(name)) {
        previewType.value = 'pdf';
    } else if (isExcelFile(name)) {
        previewType.value = 'excel';
    } else if (isWordFile(name)) {
        previewType.value = 'word';
    } else if (isPowerPointFile(name)) {
        previewType.value = 'powerpoint';
    } else if (isTextFile(categoryId, name)) {
        previewType.value = 'text';
        await loadTextContent(id);
    } else if (categoryId === 1) {
        previewType.value = 'video';
        // 为视频文件预加载元数据
        await preloadMediaMetadata(previewUrl, 'video');
    } else if (categoryId === 2) {
        previewType.value = 'audio';
        // 为音频文件预加载元数据
        await preloadMediaMetadata(previewUrl, 'audio');
    } else {
        previewType.value = 'other';
    }
};

// 预加载媒体元数据
const preloadMediaMetadata = async (url, type) => {
    try {
        const element = document.createElement(type);
        element.preload = 'metadata';
        element.src = url;

        // 记录媒体元素以便后续清理
        mediaElements.value.set(url, element);

        return new Promise((resolve, reject) => {
            element.onloadedmetadata = () => resolve();
            element.onerror = () => {
                console.warn(`无法预加载${type}元数据:`, url);
                resolve(); // 不阻塞预览流程
            };

            // 5秒超时
            setTimeout(() => resolve(), 5000);
        });
    } catch (error) {
        console.warn('预加载媒体元数据失败:', error);
    }
};

// 清理资源
const cleanupResources = () => {
    // 清理已创建的URL对象
    createdUrls.value.forEach(url => {
        try {
            URL.revokeObjectURL(url);
        } catch (error) {
            console.warn('清理URL对象失败:', error);
        }
    });
    createdUrls.value.clear();

    // 清理媒体元素
    mediaElements.value.forEach((element, url) => {
        try {
            if (element.pause && typeof element.pause === 'function') {
                element.pause();
            }
            element.src = '';
            element.load && element.load();
        } catch (error) {
            console.warn('清理媒体元素失败:', error);
        }
    });
    mediaElements.value.clear();

    // 清理文本内容
    textContent.value = '';
    isLoadingText.value = false;
};

// 检测PDF文件类型的函数
const isPdfFile = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    return extension === 'pdf';
};

// 检测Excel文件类型的函数
const isExcelFile = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    return ['xls', 'xlsx'].includes(extension);
};

// 检测Word文件类型的函数
const isWordFile = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    return ['doc', 'docx'].includes(extension);
};

// 检测PowerPoint文件类型的函数
const isPowerPointFile = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    return ['ppt', 'pptx'].includes(extension);
};

// 检测文本文件类型的函数
const isTextFile = (categoryId, fileName) => {
    const textExtensions = ['txt', 'log', 'md', 'csv', 'json', 'xml', 'html', 'htm', 'css', 'js', 'java', 'py', 'cpp', 'c', 'h', 'php', 'sql', 'sh', 'bat', 'ini', 'conf', 'yml', 'yaml'];
    const extension = fileName.split('.').pop().toLowerCase();
    return textExtensions.includes(extension);
};

// 加载文本文件内容
const loadTextContent = async (fileId) => {
    isLoadingText.value = true;
    textContent.value = '';

    try {
        const response = await previewFile(fileId);

        if (response.data instanceof Blob) {
            try {
                const text = await response.data.text();
                if (containsGarbledText(text)) {
                    throw new Error('UTF-8解码出现乱码');
                }
                textContent.value = text;
            } catch (error) {
                console.warn('UTF-8解码失败，尝试其他编码方式:', error);
                await tryAlternativeEncodings(response.data);
            }
        } else {
            textContent.value = response.data;
        }
    } catch (error) {
        console.error('加载文本内容失败:', error);
        textContent.value = '加载文件内容失败，请稍后重试';
        ElMessage.error('加载文本内容失败');
    } finally {
        isLoadingText.value = false;
    }
};

// 检测文本是否包含乱码字符
const containsGarbledText = (text) => {
    const garbledPatterns = [
        /\ufffd/g,
        /[À-ÿ]{2,}/g,
        /\?{2,}/g
    ];
    return garbledPatterns.some(pattern => pattern.test(text));
};

// 尝试其他编码方式
const tryAlternativeEncodings = async (blob) => {
    const encodings = ['GBK', 'GB2312', 'Big5', 'ISO-8859-1'];

    for (const encoding of encodings) {
        try {
            const text = await readBlobWithEncoding(blob, encoding);
            if (text && !containsGarbledText(text)) {
                textContent.value = text;
                console.log(`成功使用${encoding}编码解析文件`);
                return;
            }
        } catch (error) {
            console.warn(`${encoding}编码失败:`, error);
        }
    }

    textContent.value = '文件内容无法正确显示，可能是编码问题或文件损坏。请尝试下载文件后查看。';
};

// 使用指定编码读取Blob
const readBlobWithEncoding = (blob, encoding) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function (e) {
            resolve(e.target.result);
        };
        reader.onerror = function () {
            reject(new Error(`FileReader使用${encoding}编码读取失败`));
        };
        reader.readAsText(blob, encoding);
    });
};

// 格式化文件大小
const formatFileSize = (size) => {
    if (!size) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    let index = 0;
    let fileSize = size;
    while (fileSize >= 1024 && index < units.length - 1) {
        fileSize /= 1024;
        index++;
    }
    return `${fileSize.toFixed(2)} ${units[index]}`;
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
    if (!dateTime) return '';
    const date = new Date(dateTime);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 错误处理函数
const handleImageError = (event) => {
    console.error('图片预览加载失败:', event);
    ElMessage.error('图片预览加载失败');
};

const handleVideoError = (event) => {
    console.error('视频预览加载失败:', event);
    ElMessage.error('视频预览加载失败');
};

const handleAudioError = (event) => {
    console.error('音频预览加载失败:', event);
    ElMessage.error('音频预览加载失败');
};

const handlePdfError = (event) => {
    console.error('PDF预览加载失败:', event);
    ElMessage.error('PDF预览加载失败');
};

const handleExcelError = (event) => {
    console.error('Excel预览加载失败:', event);
    ElMessage.error('Excel预览加载失败');
};

const handleWordError = (event) => {
    console.error('Word预览加载失败:', event);
    ElMessage.error('Word预览加载失败');
};

const handlePowerPointError = (event) => {
    console.error('PowerPoint预览加载失败:', event);
    ElMessage.error('PowerPoint预览加载失败');
};

// 媒体加载事件处理
const handleMediaLoadStart = (event) => {
    console.log('媒体开始加载:', event.target.src);
};

const handleMediaCanPlay = (event) => {
    console.log('媒体可以播放:', event.target.src);
};

// 事件处理
const handleClose = () => {
    visible.value = false;
    // 清理所有资源
    cleanupResources();
    // 清理状态
    currentPreviewFile.value = null;
    previewType.value = '';
};

const handleDownload = () => {
    if (currentPreviewFile.value) {
        emit('download', currentPreviewFile.value);
    }
};

// 组件卸载时清理资源
onUnmounted(() => {
    cleanupResources();
});
</script>

<style lang="scss" scoped>
// 文件预览对话框样式
.preview-container {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;

    .image-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .preview-image {
            max-width: 100%;
            max-height: 70vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
    }

    .video-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .preview-video {
            width: 100%;
            max-width: 800px;
            max-height: 60vh;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
    }

    .audio-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;

        .audio-player-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;

            .audio-info {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;

                .audio-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #333;
                    text-align: center;
                    word-break: break-word;
                }
            }
        }

        .preview-audio {
            width: 100%;
            height: 50px;
            outline: none;
            background: #ffffff;
            border-radius: 8px;

            // 自定义音频播放器样式
            &::-webkit-media-controls-panel {
                background-color: #ffffff;
                border-radius: 8px;
                border: 1px solid #e0e0e0;
            }

            // 播放按钮
            &::-webkit-media-controls-play-button {
                background-color: #409EFF;
                border-radius: 50%;
                margin: 0 8px;
            }

            // 进度条轨道（背景）- 使用深色背景增强对比，调整厚度减少误差
            &::-webkit-media-controls-timeline {
                background-color: #b0b0b0;
                border-radius: 2px;
                height: 4px;
                margin: 0 8px;
            }

            // 进度条滑块始终可见
            &::-webkit-media-controls-timeline-container {
                opacity: 1 !important;
                visibility: visible !important;
            }

            // 进度条滑块样式 - 始终显示
            &::-webkit-slider-thumb {
                -webkit-appearance: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                background-color: #409EFF;
                border: 2px solid white;
                border-radius: 50%;
                width: 14px;
                height: 14px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                cursor: pointer;
            }

            // 专门为WebKit浏览器的进度条滑块添加额外的显示规则
            &::-webkit-media-controls-timeline::-webkit-slider-thumb {
                -webkit-appearance: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                background-color: #409EFF;
                border: 2px solid white;
                border-radius: 50%;
                width: 14px;
                height: 14px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                cursor: pointer;
            }

            // 强制显示进度条滑块，即使未聚焦
            &::-webkit-media-controls-timeline {
                &::-webkit-slider-thumb {
                    -webkit-appearance: none !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                }
            }

            // 时间显示
            &::-webkit-media-controls-current-time-display,
            &::-webkit-media-controls-time-remaining-display {
                color: #333;
                font-size: 13px;
                font-weight: 500;
                margin: 0 4px;
            }

            // 音量按钮
            &::-webkit-media-controls-mute-button {
                background-color: transparent;
                color: #666;
                margin: 0 4px;
            }

            // Firefox 样式 - 调整厚度并确保滑块始终显示
            &::-moz-range-track {
                background: #b0b0b0;
                height: 4px;
                border-radius: 2px;
                border: none;
            }

            &::-moz-range-progress {
                background: #409EFF;
                height: 4px;
                border-radius: 2px;
            }

            &::-moz-range-thumb {
                -moz-appearance: none !important;
                opacity: 1 !important;
                visibility: visible !important;
                background: #409EFF;
                border: 2px solid white;
                border-radius: 50%;
                width: 14px;
                height: 14px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
                cursor: pointer;
            }
        }
    }

    .text-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 20px;

        .text-content {
            width: 100%;
            max-width: 800px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;

            .text-header {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 16px 20px;
                background: #f8f9fa;
                border-bottom: 1px solid #e9ecef;

                .text-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #333;
                    word-break: break-word;
                }
            }

            .text-body {
                max-height: 60vh;
                overflow-y: auto;

                .text-content-pre {
                    margin: 0;
                    padding: 20px;
                    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
                    font-size: 14px;
                    line-height: 1.6;
                    color: #333;
                    background: white;
                    white-space: pre-wrap;
                    word-wrap: break-word;
                    border: none;

                    // 优化滚动条样式
                    &::-webkit-scrollbar {
                        width: 6px;
                    }

                    &::-webkit-scrollbar-track {
                        background: #f1f1f1;
                        border-radius: 3px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c1c1c1;
                        border-radius: 3px;

                        &:hover {
                            background: #a1a1a1;
                        }
                    }
                }
            }
        }
    }

    .pdf-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .preview-pdf {
            width: 100%;
            height: 70vh;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
    }

    .excel-preview,
    .word-preview,
    .powerpoint-preview {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .office-preview-placeholder {
            text-align: center;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            width: 100%;

            h3 {
                margin: 20px 0 16px 0;
                font-size: 20px;
                font-weight: 600;
                color: #333;
            }

            .office-tip {
                font-size: 16px;
                color: #666;
                margin-bottom: 8px;
                line-height: 1.5;
            }

            .office-suggestion {
                font-size: 14px;
                color: #999;
                margin-bottom: 24px;
                line-height: 1.4;
            }

            .file-details {
                background: #f8f9fa;
                padding: 20px;
                border-radius: 8px;
                margin-bottom: 24px;
                text-align: left;

                .detail-item {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 12px;
                    font-size: 14px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .label {
                        color: #666;
                        font-weight: 500;
                    }

                    .value {
                        color: #333;
                        word-break: break-all;
                    }
                }
            }

            .download-btn {
                font-size: 16px;
                padding: 12px 24px;
                border-radius: 8px;

                i {
                    margin-right: 8px;
                }
            }
        }
    }

    .preview-placeholder {
        text-align: center;
        color: #666;

        p {
            margin: 16px 0 8px 0;
            font-size: 16px;
            font-weight: 500;
        }

        .preview-tip {
            font-size: 14px;
            color: #999;
            margin-top: 8px;
        }
    }
}

.preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    .file-info {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        flex: 1;

        .info-item {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .preview-footer {
        flex-direction: column;
        align-items: stretch;

        .file-info {
            justify-content: center;
        }
    }
}
</style>